<template>
  <div class="create-recipe-page">
    <!-- 关闭按钮
    <button class="close-btn" @click="closePage">×</button> -->

    <!-- 用户头像 -->
    <img v-if="admin"
      :src="admin.avatar" 
      alt="用户头像" 
      class="avatar"
    />

    <!-- 活动提示卡片 -->
    <div class="activity-card">
      <div class="card-text">
        <h3 class="card-title">传菜谱打卡</h3>
        <p class="card-desc">参加就拿流量、厨 studio 代金券！</p>
      </div>
      <div class="card-decor">
        <div class="decor-shape shape1"></div>
        <div class="decor-shape shape2"></div>
        <div class="decor-shape shape3"></div>
      </div>
    </div>

    <!-- 功能按钮区域 -->
    <div class="func-buttons">
      <div class="func-item" @click="handleFunc('recipe')">
        <div class="func-icon icon-recipe">
          <!-- 可替换为 SVG/Icon 组件 -->
          <span class="icon-inner"><router-link to="/addRecipe">菜谱</router-link></span>
        </div>
        <p class="func-label">传菜谱</p>
      </div>
      <div class="func-item" @click="handleFunc('work')">
        <div class="func-icon icon-work">
          <span class="icon-inner"><router-link to="/addWorks">作品</router-link></span>
        </div>
        <p class="func-label">传作品</p>
      </div>
      <div class="func-item" @click="handleFunc('diet')">
        <div class="func-icon icon-diet">
          <span class="icon-inner">饮食</span>
        </div>
        <p class="func-label">记饮食</p>
      </div>
    </div>

    <!-- 照片识别按钮 -->
    <button class="ocr-btn" @click="ocrCreate">从照片识别文字创建菜谱</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'; // 路由跳转需引入

const router = useRouter();
const admin = JSON.parse(localStorage.getItem("admin") || 'null')


// 关闭页面（示例：返回上一页）
const closePage = () => {
  router.back();
};

// 功能按钮点击逻辑
const handleFunc = (type) => {
  console.log('点击功能：', type);
  // 可扩展：跳转到对应功能页（如传菜谱、传作品页面）
};

// 照片识别创建菜谱逻辑
const ocrCreate = () => {
  console.log('触发照片识别');
  // 可扩展：调用识别接口、打开图片选择器等
};
</script>

<style scoped>
.create-recipe-page {
  min-height: 100vh;
  background: #fff;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 关闭按钮 */
.close-btn {
  align-self: flex-start;
  font-size: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #333;
}

/* 头像 */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 20px 0;
  object-fit: cover;
}

/* 活动卡片 */
.activity-card {
  width: 100%;
  max-width: 400px;
  background: #fdf6e3;
  border: 1px solid #e6cc80;
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.card-text {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #8c5a0a;
  margin-bottom: 4px;
}

.card-desc {
  font-size: 14px;
  color: #8c5a0a;
}

.card-decor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 12px;
}

.decor-shape {
  border-radius: 50%;
}

.shape1 {
  width: 24px;
  height: 24px;
  background: #4285f4;
}

.shape2 {
  width: 32px;
  height: 32px;
  background: #ea4335;
}

.shape3 {
  width: 24px;
  height: 24px;
  background: #4285f4;
}

/* 功能按钮区域 */
.func-buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 400px;
  margin-bottom: 40px;
}

.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.func-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.icon-recipe {
  background: #bde0fe;
}

.icon-work {
  background: #ff6b6b;
}

.icon-diet {
  background: #d4edda;
}

.icon-inner {
  font-size: 20px;
}

.func-label {
  font-size: 14px;
  color: #333;
}

/* 照片识别按钮 */
.ocr-btn {
  padding: 12px 24px;
  background: #f5f5f5;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
}

.ocr-btn:hover {
  background: #eee;
}
</style>